<template>
	<section class="header">
		<el-dropdown size="large">
			<el-avatar v-if="userAdmin.userInfo?.headerImg" :size="50" :src="image" />
			<el-avatar v-else :size="50">
				{{ userAdmin.userInfo.nickName?.split('')[0] }}
			</el-avatar>
			<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item disabled>
						{{ userAdmin.userInfo?.nickName || userAdmin.userInfo?.userName }}
					</el-dropdown-item>
					<el-dropdown-item @click="toUserInfo">用户信息</el-dropdown-item>
					<el-dropdown-item @click="logout">退出</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>
	</section>
</template>

<script setup>
import useAdminStore from '@/store/index.js'
import { useRouter } from 'vue-router'
import { computed } from 'vue'

const userAdmin = useAdminStore()
const router = useRouter()
const image = computed(
	() => import.meta.env.VITE_APP_IP + userAdmin.userInfo.headerImg,
)
const toUserInfo = () => {
	router.push('/userinfo')
}

const logout = () => {
	sessionStorage.clear()
	location.reload()
}
</script>

<style scoped>
.header {
	height: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 10px 20px;
	box-sizing: border-box;
}
:deep(.el-avatar) {
	cursor: pointer;
}
</style>
